import React from 'react'
import Topbar from '../../components/Topbar/Topbar';
import './Superway3.css';

class Superway3 extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			content:'',
			time:'',
  
			//获取本地中使用用户的id
			id:localStorage.getItem('userid'),
		};
	}
  
	componentDidMount() {
		//获取所有动态
		fetch(`https://www.prebeauty.work/superway3`,{
		method:'GET',
		headers:{
			'content-type': 'application/json'
		}
		}).then((res)=>{
			if(res.status===200){
				res.json().then( (data)=> {
					var newData=[]
					newData = data.sort(this.compare('time'))
					this.setState({
						dataList:newData
					})
					console.log(this.state.dataList)
			})
			}else {
				alert("出现一个问题");
		}
		})
	}

	//将时间戳转换成正常时间格式
	timeTrans(date) {
		var date = new Date(date * 1);
		var Y = date.getFullYear() + '-';
		var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
		var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
		var h = date.getHours() + ':';
		var m = date.getMinutes() + ':';
		var s = date.getSeconds();
		return Y + M + D + h + m + s;
	}

	//比较大小
	compare(property) {
		return function (a, b) {
			var value1 = a[property];
			var value2 = b[property];
			return value2 - value1;
		}
	}
  
	render() {
		console.log(this.state.dataList)
		return (
			<div className="superway3">
				<Topbar name="小纸条" color='lightblue'/>
				<div className="superway3-fabu"> 
					<button  
						style={{
							width:'15%',
							height:'30px',
							borderRadius:'20px',
							backgroundColor: 'lightblue',
							position:'absolute',
							right:'5%',
							bottom:'20px'
						}} 
						onClick={async()=>{
							const super1param = {
								userid:this.state.id,
								content:this.state.content,
							}
							await fetch('https://www.prebeauty.work/superway3', {
								method: 'POST',
								body: JSON.stringify(super1param),
								headers: {
										'Content-Type': 'application/json'
								},
							})
							.then((res) => res.json() )
							.then((res) => {
								console.log(res);
								//清空输入框
								document.getElementById("superway3-fabu").value=""
								//重新获取所有动态
								fetch(`https://www.prebeauty.work/superway3`,{
									method:'GET',
									headers:{
										'content-type': 'application/json'
									}
									}).then((res)=>{
										if(res.status===200){
											res.json().then( (data)=> {
												this.setState({
													dataList:data
												})
												console.log(this.state.dataList)
											})
										}else {
											alert("出现一个问题");
										}
									})
							})
							fetch(`https://www.prebeauty.work/superway3`,{
								method:'GET',
								headers:{
									'content-type': 'application/json'
								}
								}).then((res)=>{
									if(res.status===200){
										res.json().then( (data)=> {
											var newData=[]
											newData = data.sort(this.compare('time'))
											this.setState({
												dataList:newData
											})
											console.log(this.state.dataList)
									})
									}else {
										alert("出现一个问题");
								}
							})
						}}

					>发布</button>
					<textarea
						id="superway3-fabu"
						placeholder='小纸条，你的学习树洞~' 
						style={{width:'80%',height:'90px',borderRadius:'20px',marginTop:'15px',marginLeft:'5%',padding:'6px 3%',position:'absolute',top:'8px'}}
						onChange={(e)=>{
							this.setState({
								content:e.target.value 
							})
						}}
					></textarea>   
				</div>
                  
				{
					(!this.state.dataList) ? null : this.state.dataList.map((item,index)=>{
						return (
							<div key={index}>
								{this.timeTrans(item.time)}
								<div style={{width:'90%',height:'60px',backgroundColor:'lightblue',borderRadius:'15px',margin:'10px 5%',textAlign:'center',lineHeight:'60px'}}>
									{item.content}
								</div>
							</div>
						) 
					})
				}
			</div>
		)
	}
}

export default Superway3